<!--找成果-->
<template>
	<view>
		
		<view v-if="category?.length > 0" class="white pt-8 pb-10 mb-6">
			<!--搜索-->
			
			<view class="white pr-24 flex flex-row flex-row-center-between">
				<view @click="showcategory=!showcategory" class="flex flex-row flex-row-center-center px-32 flex-shrink" 
				style="height:100%"
				>
					<text class="pr-10 text-size-m">{{ tabsTitleKeyName }}</text>
					<tm-icon :font-size="24" name="tmicon tmicon-angle-down"></tm-icon>
				</view>
				<tm-input @confirm="confirmSearch" 
				font-color="#0073FF"
				class="flex-1" :text="false"  
				v-model="status.keyWord"
				:input-padding="[4, 2]" color="#F7F7F7"
					focus-color="#F7F7F7" :round="3" :height="61" placeholder="请输入关键字词">
					<template v-slot:left>
						<tm-icon class="px-24" name="tmicon-search" color="#0073FF"></tm-icon>
					</template>
					<template v-slot:right>
						<view @click="cancelSearch" class="pl-24"><tm-button :round="3" :width="125" :height="56"
						:transprent="true"
						font-color="#0073FF"
						 color="blue" :margin="[0, 0]"
								:padding="[0, 0]" label="取消"></tm-button></view>
					</template>
				</tm-input>
			</view>
			
		</view>
		
		<zhaochengguo 
		ref="itemListObj"
		:apiName="detailApiName"
		:keytype="categoryId"
		@confirm="filterChange" :filters="select_data" :list="list" v-if="select_data.length"></zhaochengguo>

		<bl-list-layout 
		btn-color="white" 
		@restart-load="resetReq(true); getData()" 
		:status="status"
		:list-len="list.length">
		</bl-list-layout>

		<tm-action-menu @change="tabsChange" v-model="showcategory" v-model:active="tabsTitleKey" rang-key="title" :list="category"></tm-action-menu>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue"
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import blListLayout from "@/components/bl-list-layout.vue";
import { apiUr, useReqList } from "@/libs/api";

import zhaochengguo from "./components/zhaochengguo.vue";
const itemListObj = ref<InstanceType<typeof zhaochengguo>|null>(null)

const isUpdate = ref(false)	

const { status, resetReq, actionHttp, list, setOptions,select_data } = useReqList();
const tabsTitleKey = ref(2)

const category = ref<{ name: string, title: string }[]>([])
const tabsTitleKeyName = computed(()=>{
	if(category.value.length==0) return ""
	let item = category.value[tabsTitleKey.value]
	if(!item) return ""
	uni.setNavigationBarTitle({
		title:item.title
	})
	return item.title
})
const categoryId = computed(()=>{
	if(category.value.length==0) return ""
	return category.value[tabsTitleKey.value]?.name||""
})


const routerApiName = computed(()=>{
	if(categoryId.value == 'achieved') return 'achievedIndex'
	if(categoryId.value == 'service') return 'serviceIndex'
	if(categoryId.value == 'demand') return 'demandIndex'
	if(categoryId.value == 'investment') return 'financingIndex'
	if(categoryId.value == 'team') return 'teamIndex'
	if(categoryId.value == 'financing') return 'financingIndex'
	return 'achievedIndex'
})

const detailApiName = computed(()=>{
	if(categoryId.value == 'achieved') return 'achievedDetail'
	if(categoryId.value == 'service') return 'serviceDetail'
	if(categoryId.value == 'demand') return 'demandDetail'
	if(categoryId.value == 'investment') return 'financingDetail'
	if(categoryId.value == 'team') return 'teamDetail'
	if(categoryId.value == 'financing') return 'financingDetail'
	return 'achievedDetail'
})

const showcategory = ref(false)

const reqData = ref({})


function tabsChange(item:any,index:number) {
	tabsTitleKey.value = index;
	
	reqData.value = {}
	
	resetReq(true);
	getData()
	isUpdate.value = true;
}

function filterChange(d:object){
	reqData.value = {...d}
	resetReq(true);
	getData()
	
}

function cancelSearch(){
	resetReq(true);
	getData()
}
function confirmSearch(){
	resetReq(false);
	getData()
}

onLoad(async (obj:any) => {
	
	await getCategory();
	if(obj?.id){
		let tempid =  obj?.id??"";
		let index = category.value.findIndex(el=>el.name==tempid)
		tabsTitleKey.value = index;
	}

	getData()
})

onPullDownRefresh(async () => {
	if (status.isLoading) {
		uni.stopPullDownRefresh();
		return
	}
	resetReq(true);
	await getCategory();
	getData()
})
onReachBottom(() => {
	if (status.isLoading || !status.isMore) return;
	getData()
})

function getData() {
	uni.showLoading({ title: "...", mask: true })
	actionHttp(apiUr[routerApiName.value](), { ...reqData.value,is_investment:categoryId.value == 'investment'?1:2}).then(() => {
		uni.stopPullDownRefresh();
		uni.hideLoading()
		if(isUpdate.value){
			itemListObj.value?.updateFilter()
			isUpdate.value = false;
		}
	})
}

async function getCategory() {
	let data = await apiUr.sysDataType()
	category.value = data.data
	
}

</script>
<style>
page,
body {
	background-color: #F7F7F7;
}
</style>

<style lang="less" scoped>
.c_textlist {
	border-radius: 6rpx;
	color: #ffffff;
	font-size: 26rpx;
	padding: 8rpx 16rpx;
}

.c_ckbg {
	background: #F7F7F7;
	width: 702rpx;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 16rpx;
}

.c_kd {
	width: 248rpx;
}
</style>
